import { Meta } from '@storybook/addon-docs/blocks';
import { Typography, Card, Row, Col, Space, List } from 'antd';

<Meta title="API Overview" />

<div style={{ padding: '24px' }}>
  <Space direction="vertical" size="large" style={{ width: '100%' }}>
    <div>
      <Typography.Title level={1}>
        📦 API Overview
      </Typography.Title>
      <Typography.Text>Comprehensive guide to Fetcher's package ecosystem and their capabilities</Typography.Text>
    </div>

    <Card>
      <Typography.Title level={4}>Core Packages</Typography.Title>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>Core HTTP Client</Typography.Text>
             <List
               size="small"
               dataSource={[
                 'Ultra-lightweight HTTP client (3KiB)',
                 'Path/query parameter support',
                 'Ordered interceptor system',
                 'Timeout and error handling',
                 'TypeScript-first design'
               ]}
               renderItem={(item) => <List.Item>{item}</List.Item>}
               style={{ marginTop: 8 }}
             />
          </Card>
        </Col>
        <Col xs={24} sm={12}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-decorator</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>Declarative APIs</Typography.Text>
             <List
               size="small"
               dataSource={[
                 'Class-based service definitions',
                 'Automatic parameter binding',
                 'Decorator-driven configuration',
                 'Type-safe method implementations',
                 'Metadata system for customization'
               ]}
               renderItem={(item) => <List.Item>{item}</List.Item>}
               style={{ marginTop: 8 }}
             />
          </Card>
        </Col>
      </Row>
    </Card>

    <Card>
      <Typography.Title level={4}>Framework Integrations</Typography.Title>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={8}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-react</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>React Hooks</Typography.Text>
            <List
              size="small"
              dataSource={[
                'React hooks for HTTP operations',
                'Promise state management',
                'Query and mutation hooks',
                'Real-time data streaming',
                'Automatic error handling'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-wow</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>Wow CQRS Framework</Typography.Text>
            <List
              size="small"
              dataSource={[
                'CQRS pattern implementation',
                'DDD primitives support',
                'Real-time event streaming',
                'Command and query clients',
                'Advanced query DSL'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-cosec</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>CoSec Authentication</Typography.Text>
            <List
              size="small"
              dataSource={[
                'Automatic authentication headers',
                'Device ID management',
                'Token refresh handling',
                'Request tracking',
                'Secure token storage'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
      </Row>
    </Card>

    <Card>
      <Typography.Title level={4}>Utility Packages</Typography.Title>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-eventbus</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>Event Bus System</Typography.Text>
            <List
              size="small"
              dataSource={[
                'Serial/parallel execution',
                'Cross-tab broadcasting',
                'Type-safe event handling',
                'Async event support',
                'One-time handlers'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-eventstream</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>Event Streaming</Typography.Text>
            <List
              size="small"
              dataSource={[
                'Server-Sent Events support',
                'Real-time data streaming',
                'Event converter system',
                'LLM client integration',
                'Stream processing'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-storage</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>Storage Utilities</Typography.Text>
            <List
              size="small"
              dataSource={[
                'Key-based storage',
                'Multiple storage backends',
                'Reactive storage updates',
                'Type-safe storage',
                'Storage synchronization'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} md={6}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-openapi</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>OpenAPI Integration</Typography.Text>
            <List
              size="small"
              dataSource={[
                'OpenAPI spec parsing',
                'Automatic client generation',
                'Type-safe API clients',
                'Schema validation',
                'API documentation'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
      </Row>
    </Card>

    <Card>
      <Typography.Title level={4}>Development Tools</Typography.Title>
      <Row gutter={[16, 16]}>
        <Col xs={24} sm={12}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-generator</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>Code Generation</Typography.Text>
            <List
              size="small"
              dataSource={[
                'Automatic code generation',
                'API client scaffolding',
                'Type definition generation',
                'Build-time optimization',
                'Custom generator plugins'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12}>
          <Card size="small" hoverable>
            <Typography.Text strong>@ahoo-wang/fetcher-viewer</Typography.Text>
            <br />
            <Typography.Text type="secondary" strong>API Viewer</Typography.Text>
            <List
              size="small"
              dataSource={[
                'Interactive API exploration',
                'Request/response visualization',
                'API documentation viewer',
                'Testing interface',
                'Developer tools integration'
              ]}
              renderItem={(item) => <List.Item>{item}</List.Item>}
              style={{ marginTop: 8 }}
            />
          </Card>
        </Col>
      </Row>
    </Card>

    <Card>
      <Typography.Title level={4}>Architecture Principles</Typography.Title>
      <List
        size="small"
        dataSource={[
          '**Modular Design**: Core package with optional extensions',
          '**TypeScript First**: Complete type safety throughout',
          '**Interceptor Pattern**: Flexible middleware system',
          '**Native Compatibility**: Built on Fetch API',
          '**Framework Agnostic**: Works with any JavaScript framework',
          '**Performance Focused**: Minimal bundle size and optimal execution'
        ]}
        renderItem={(item) => <List.Item><span dangerouslySetInnerHTML={{ __html: item }} /></List.Item>}
      />
    </Card>

  </Space>
</div>
